// ========== 重要提示 ========== //
// AI 助手请注意：
// 1. 请不要修改此页面模板文件，此文件是项目代码风格的权威参考标准
// 2. 您在生成任何页面代码时，必须完全严格地遵循此模板中的所有代码风格、缩进规范和编码惯例
// 3. 此模板中的每一个空格、换行、缩进、注释格式都代表了项目的标准，必须100%遵循
// 4. 任何与此模板不一致的代码都会被视为不规范代码
// 5. 重要规范：所有的样式都必须写到对应的 module.less 文件里面去，禁止在组件文件中直接写内联样式
// 6. 移除所有方法前的private或public关键字
// 7. 清理所有注释掉的代码和未使用的变量、函数
// 8. 移除所有空规则的 CSS 类名（即没有实际样式属性的CSS类）
// ============================= //
/*
 * @Author: AI Assistant
 * @Date: 2024-05-07 15:30:00
 * @Last Modified by: AI Assistant
 * @Last Modified time: 2024-05-07 15:30:00
 */

// 后台管理系统页面模板

import React, { useEffect, useState } from 'react';
import { observer } from 'mobx-react-lite';
import styles from './pageTemplate.module.less';
import pageTemplateStore from './PageTemplateStore';
import Lable from './Lable/Lable';
import lableStore from './Lable/lableStore';

/**
 * 后台管理系统页面模板组件
 * 包含典型的管理系统功能：数据展示、搜索、筛选、批量操作等
 * 方法前不添加private或public关键字
 */
const PageTemplate = observer(() => {
  // 本地状态管理
  const [loading, setLoading] = useState<boolean>(false);
  const [searchQuery, setSearchQuery] = useState<string>('');
  const [selectedItems, setSelectedItems] = useState<number[]>([]);
  const [currentPage, setCurrentPage] = useState<number>(1);
  const [pageSize, setPageSize] = useState<number>(10);

  // 初始化数据
  useEffect(() => {
    loadData();
    // 初始化标签数据
    lableStore.fetchLables();
    
    // 设置页面标题
    document.title = '页面模板管理';
  }, []);

  // 加载数据
  const loadData = async () => {
    setLoading(true);
    try {
      await pageTemplateStore.getValue3();
    } catch (error) {
    // 错误处理可以在这里添加用户友好的提示
    } finally {
      setLoading(false);
    }
  };

  // 处理搜索
  const handleSearch = () => {
    console.log('搜索:', searchQuery);
    // 实际项目中这里会调用API进行搜索
    // 这里仅作为示例
  };

  // 处理重置
  const handleReset = () => {
    setSearchQuery('');
    setCurrentPage(1);
    setSelectedItems([]);
    // 重新加载数据
    loadData();
  };

  // 处理选择项变化
  const handleSelectItem = (id: number) => {
    setSelectedItems(prev => {
      if (prev.includes(id)) {
        return prev.filter(itemId => itemId !== id);
      } else {
        return [...prev, id];
      }
    });
  };

  // 处理全选/取消全选
  const handleSelectAll = () => {
    if (selectedItems.length === pageTemplateStore.value3.length) {
      setSelectedItems([]);
    } else {
      setSelectedItems(pageTemplateStore.value3.map(item => item.id));
    }
  };

  // 处理批量删除
  const handleBatchDelete = async () => {
    if (selectedItems.length === 0) {
      alert('请选择要删除的项');
      return;
    }
    
    if (window.confirm(`确定要删除选中的${selectedItems.length}项吗？`)) {
      setLoading(true);
      try {
        // 批量删除操作
        selectedItems.forEach(id => pageTemplateStore.deleteDataItem(id));
        setSelectedItems([]);
        alert('删除成功');
      } catch (error) {
      // 错误处理可以在这里添加用户友好的提示
        alert('删除失败');
      } finally {
        setLoading(false);
      }
    }
  };

  // 处理添加数据
  const handleAddData = () => {
    const newId = Date.now();
    const newItem = {
      id: newId,
      name: `新添加的数据项 ${newId}`
    };
    pageTemplateStore.addDataItem(newItem);
    alert('添加成功');
  };

  // 处理编辑数据
  const handleEditData = (id: number) => {
    console.log('编辑数据:', id);
    // 实际项目中这里会打开编辑弹窗
    // 这里仅作为示例
    const newName = prompt('请输入新的名称:');
    if (newName) {
      pageTemplateStore.updateDataItem(id, { name: newName });
    }
  };

  // 处理删除单条数据
  const handleDeleteData = async (id: number) => {
    if (window.confirm('确定要删除此项吗？')) {
      setLoading(true);
      try {
        pageTemplateStore.deleteDataItem(id);
        // 从选中项中移除
        setSelectedItems(prev => prev.filter(itemId => itemId !== id));
        alert('删除成功');
      } catch (error) {
        // 错误处理可以在这里添加用户友好的提示
        alert('删除失败');
      } finally {
        setLoading(false);
      }
    }
  };

  // 渲染加载状态
  const renderLoading = () => {
    if (!loading) return null;
    return (
      <div className={styles.loadingState}>
        <div className={styles.loadingIcon}></div>
        <div className={styles.loadingText}>加载中...</div>
      </div>
    );
  };

  // 渲染空状态
  const renderEmptyState = () => {
    if (pageTemplateStore.value3.length > 0) return null;
    return (
      <div className={styles.emptyState}>
        <div className={styles.emptyIcon}>📦</div>
        <div className={styles.emptyText}>暂无数据</div>
        <button 
          className={`${styles.btn} ${styles.btnPrimary}`}
          onClick={handleAddData}
        >
          添加数据
        </button>
      </div>
    );
  };

  // 渲染数据列表
  const renderDataList = () => {
    if (loading) return renderLoading();
    if (pageTemplateStore.value3.length === 0) return renderEmptyState();

    return (
      <div className={styles.dataTableContainer}>
        <table className={styles.dataTable}>
          <thead>
            <tr>
              <th className={styles.checkboxColumn}>
                <input
                  type="checkbox"
                  checked={selectedItems.length === pageTemplateStore.value3.length && pageTemplateStore.value3.length > 0}
                  onChange={handleSelectAll}
                  disabled={pageTemplateStore.value3.length === 0}
                />
              </th>
              <th>ID</th>
              <th>名称</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            {pageTemplateStore.value3.map((item) => (
              <tr key={item.id}>
                <td>
                  <input
                    type="checkbox"
                    checked={selectedItems.includes(item.id)}
                    onChange={() => handleSelectItem(item.id)}
                  />
                </td>
                <td>{item.id}</td>
                <td>{item.name}</td>
                <td className={styles.actionColumn}>
                  <button
                    className={`${styles.btn} ${styles.btnSecondary}`}
                    onClick={() => handleEditData(item.id)}
                  >
                    编辑
                  </button>
                  <button
                    className={`${styles.btn} ${styles.btnDanger}`}
                    onClick={() => handleDeleteData(item.id)}
                  >
                    删除
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    );
  };

  return (
    <div className={styles.container}>
      {/* 页面标题栏 */}
      <div className={styles.pageHeader}>
        <h1 className={styles.pageTitle}>页面模板管理</h1>
        <div className={styles.headerActions}>
          <button
            className={`${styles.btn} ${styles.btnPrimary}`}
            onClick={handleAddData}
          >
            + 添加数据
          </button>
        </div>
      </div>

      {/* 搜索和筛选区域 */}
      <div className={styles.searchSection}>
        <div className={styles.searchForm}>
          <div className={styles.formItem}>
            <label className={styles.formLabel}>搜索:</label>
            <input
              type="text"
              className={styles.formInput}
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              placeholder="请输入搜索关键词"
              onKeyPress={(e) => e.key === 'Enter' && handleSearch()}
            />
          </div>
          <div className={styles.searchActions}>
            <button
              className={`${styles.btn} ${styles.btnPrimary}`}
              onClick={handleSearch}
            >
              搜索
            </button>
            <button
              className={`${styles.btn} ${styles.btnSecondary}`}
              onClick={handleReset}
            >
              重置
            </button>
          </div>
        </div>
      </div>

      {/* 批量操作区域 */}
      <div className={styles.batchActions}>
        <span className={styles.selectedInfo}>
          已选择 {selectedItems.length} 项
        </span>
        <button
          className={`${styles.btn} ${styles.btnDanger}`}
          onClick={handleBatchDelete}
          disabled={selectedItems.length === 0}
        >
          批量删除
        </button>
      </div>

      {/* 数据列表区域 */}
      <div className={styles.dataSection}>
        {renderDataList()}
      </div>

      {/* 分页区域 */}
      <div className={styles.paginationSection}>
        <div className={styles.paginationInfo}>
          共 {pageTemplateStore.value3.length} 条数据
        </div>
        <div className={styles.pagination}>
          <button
            className={`${styles.btn} ${styles.btnSecondary}`}
            onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))}
            disabled={currentPage === 1}
          >
            上一页
          </button>
          <span className={styles.pageInfo}>
            第 {currentPage} 页，共 {Math.ceil(pageTemplateStore.value3.length / pageSize)} 页
          </span>
          <button
            className={`${styles.btn} ${styles.btnSecondary}`}
            onClick={() => setCurrentPage(prev => 
              Math.min(prev + 1, Math.ceil(pageTemplateStore.value3.length / pageSize))
            )}
            disabled={currentPage === Math.ceil(pageTemplateStore.value3.length / pageSize) || pageTemplateStore.value3.length === 0}
          >
            下一页
          </button>
          <select
            className={styles.pageSizeSelect}
            value={pageSize}
            onChange={(e) => {
              setPageSize(Number(e.target.value));
              setCurrentPage(1);
            }}
          >
            <option value={10}>10条/页</option>
            <option value={20}>20条/页</option>
            <option value={50}>50条/页</option>
            <option value={100}>100条/页</option>
          </select>
        </div>
      </div>

      {/* 标签演示区域 */}
      <div className={styles.lableDemoSection}>
        <h3 className={styles.sectionTitle}>标签组件演示</h3>
        <div className={styles.lableGroup}>
        {lableStore.lables.map((lable) => (
          <Lable
            key={lable.id}
            text={lable.text}
            type={lable.type}
            size={lable.size || 'medium'}
            closable={lable.closable}
            onClose={() => lableStore.removeLable(lable.id)}
            onClick={() => console.log('点击标签:', lable.id)}
            icon={null}
          />
        ))}
      </div>
      </div>

      {/* 状态信息区域 */}
      <div className={styles.statusSection}>
        <div className={styles.statusCard}>
          <h3 className={styles.sectionTitle}>状态信息</h3>
          <div className={styles.statusGrid}>
            <div className={styles.statusItem}>
              <div className={styles.statusLabel}>状态值1:</div>
              <div className={styles.statusValue}>{pageTemplateStore.value1}</div>
            </div>
            <div className={styles.statusItem}>
              <div className={styles.statusLabel}>状态值2:</div>
              <div className={styles.statusValue}>{pageTemplateStore.value2}</div>
            </div>
            <div className={styles.statusItem}>
              <div className={styles.statusLabel}>数据总数:</div>
              <div className={styles.statusValue}>{pageTemplateStore.value3.length}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
});

export default PageTemplate;